<template>
  <!-- mini版分页器 -->
  <lc-rower v-if="isMini" class="lc-pagination__mini">
    <el-button
      link
      :class="preDisabled ? 'button-disabled' : ''"
      :disabled="preDisabled"
      :icon="ArrowLeft"
      @click="handlePre"
    ></el-button>
    <el-input v-model="pageIndex" @change="handleCurrentPageChange"></el-input>
    <span>/</span>
    <span>{{ Math.ceil(pageOptions.total / pageOptions.pageSize) }}</span>
    <el-button
      link
      :disabled="nextDisabled"
      :class="nextDisabled ? 'button-disabled' : ''"
      :icon="ArrowRight"
      @click="handleNext"
    ></el-button>
  </lc-rower>
  <!-- 非mini -->
  <lc-rower v-else :class="background ? '' : 'lc-pagination__simple'">
    <el-pagination
      ref="pager"
      class="lc-pagination"
      :currentPage="pageOptions.pageIndex"
      :pageSize="pageOptions.pageSize"
      :total="pageOptions.total"
      :layout="pageOptions.layout"
      :pagerCount="pagerCount"
      :pageSizes="pageSizes"
      @current-change="handleCurrentPageChange"
      @size-change="handlePageSizeChange"
    >
      <div
        class="lc-pagination-sizer"
        v-if="pageOptions.layout.indexOf('sizes') > -1 && pageStyle !== 'small'"
      >
        每页
        <el-select v-model="pageOptions.pageSize" size="small" @change="handlePageSizeChange">
          <el-option
            v-for="(size, index) in pageSizes"
            :key="'size_' + index"
            :label="size"
            :value="size"
          ></el-option> </el-select
        >条
      </div>
      <slot />
    </el-pagination>
    <div
      class="lc-pagination-sizer"
      v-if="pageOptions.layout.indexOf('sizes') > -1 && pageStyle == 'small'"
    >
      每页
      <el-select v-model="pageOptions.pageSize" size="small" @change="handlePageSizeChange">
        <el-option
          v-for="(size, index) in pageSizes"
          :key="'size_' + index"
          :label="size"
          :value="size"
        ></el-option> </el-select
      >条
    </div>
    <div class="lc-pagination__jump" v-if="pageOptions.layout.indexOf('jumper') > -1">
      <div>跳至</div>
      <el-input @change="handleCurrentPageChange" v-model="jumpToPageIndex"> </el-input
      ><span>页</span>
    </div>
  </lc-rower>
</template>

<script setup>
import { computed, onMounted, watch, ref } from 'vue';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
const props = defineProps({
  // 配置选项
  paginationOptions: {
    type: Object,
    default: () => {}
  },
  // pageSizes
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50]
  },
  pageStyle: {
    type: String,
    default: 'default'
  },
  background: {
    type: Boolean,
    default: false
  },
  pagerCount: {
    type: Number,
    default: 5
  },
  isCurrentPageTotal: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(['current-change', 'size-change']);
const pageIndex = ref(1);
const jumpToPageIndex = ref(1);
const pageOptions = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  layout: 'total, slot, prev, pager, next'
});
const nextDisabled = ref(false);
const preDisabled = ref(false);
const isMini = computed(() => props.pageStyle === 'mini');
watch(
  () => props.paginationOptions,
  () => {
    pageOptions.value = Object.assign({}, pageOptions.value, props.paginationOptions);
  },
  { immediate: true, deep: true }
);
watch(jumpToPageIndex, (val, oldVal) => {
  if (Number.isNaN(Number(val))) {
    jumpToPageIndex.value = oldVal;
  }
});
/* ========== methods start ==========  */
function initBtnStatus() {
  preDisabled.value = false;
  nextDisabled.value = false;
  if (pageOptions.value.pageIndex < 1 || pageOptions.value.pageIndex == 1) {
    if (isMini.value) {
      pageIndex.value = 1;
    } else {
      pageOptions.value.pageIndex = 1;
      jumpToPageIndex.value = 1;
    }
    preDisabled.value = true;
  }
  let maxPage = Math.ceil(pageOptions.value.total / pageOptions.value.pageSize);
  if (pageOptions.value.pageIndex > maxPage || pageOptions.value.pageIndex == maxPage) {
    if (isMini.value) {
      pageIndex.value = maxPage;
    } else {
      pageOptions.value.pageIndex = maxPage;
      jumpToPageIndex.value = maxPage;
    }
    nextDisabled.value = true;
  }
}
function handleCurrentPageChange(pageIndex) {
  pageOptions.value.pageIndex = pageIndex;
  initBtnStatus();
  emits('current-change', Number(pageOptions.value.pageIndex));
}
function handlePageSizeChange(pageSize) {
  pageOptions.value.pageSize = pageSize;
  pageOptions.value.pageIndex = 1;
  emits('size-change', Number(pageOptions.value.pageSize));
}
function handlePre() {
  pageIndex.value--;
  handleCurrentPageChange(pageIndex);
}
function handleNext() {
  pageIndex.value++;
  handleCurrentPageChange(pageIndex.value);
}
/* ========== methods end ==========  */
onMounted(() => {
  initBtnStatus();
});
defineExpose({
  pageOptions
});
</script>
